<template>
<swiper class="container" number='2' @change="swiperChange">
	<swiper-item class="s_item" v-for="(item, index) in cityList" :key="index">
	<!-- 	<view class="item" v-if="index==0" @click="toCity(0)">
			<image class="img1" :src="cityList[0].thumb_y" mode=""></image>
			<view class="city_name">{{cityList[0].city_name}}</view>
			<view class="jl">{{(cityList[0].juli/1000).toFixed(2)}}km</view>
			<view class="chain">{{cityList[0].chain_name[0]}}</view>
			<view class="chain">{{cityList[0].chainList.length==1?cityList[0].chainList[0]:cityList[0].chainList[0]+'...'}}</view>
		</view> -->
		<view class="flex_b_c">
			<view class="item1" @click="toCity(index)">
				<image class="img2" :src="item.thumb_x" mode=""></image>
				<view class="see">
					<image class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/see.png" mode="widthFix"></image>{{item.read_num||0}}
					<image class="see_img m_left" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/fx_icon.png" mode="widthFix"></image>{{item.share_num||0}}
				</view>
				<view class="city_name">{{item.city_name}}</view>
				<!-- <view class="jl">{{(item.juli/1000).toFixed(2)}}km</view> -->
				<!-- <view class="chain">{{cityList[0].chainList.length==1?cityList[0].chainList[0]:cityList[0].chainList[0]+'...'}}</view> -->
				<view class="chain">
					<view class="chain1">{{item.chain_name[0]}}</view>
					<view class="chain1" v-if="item.chain_name.length>1">{{item.chain_name[1]}}</view>
				</view>
			</view>
		<!-- 	<view class="item1" v-if='cityList[index*2].thumb_x'  @click="toCity(index*2)">
				<image class="img2" :src="cityList[index*2].thumb_x" mode=""></image>
				<view class="city_name">{{cityList[index*2].city_name}}</view>
				<view class="jl">{{(cityList[index*2].juli/1000).toFixed(2)}}km</view>
				<view class="chain">{{cityList[index*2].chain_name[0]}}</view>
				<view class="chain">{{cityList[0].chainList.length==1?cityList[0].chainList[0]:cityList[0].chainList[0]+'...'}}</view>
			</view> -->
		</view>
	</swiper-item>
</swiper>
</template>

<script>
	export default {
		props: ['cityList'],
		name:"cityList",
		data() {
			return {
				
			};
		},
		methods:{
			swiperChange(){
				
			},
			toCity(index){
				uni.navigateTo({
					url:'/pages/city/city?id='+ this.cityList[index].id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	height: 112px;
	
}
.img1{
	height: 100%;
	width: 222px;
	border-radius: 6px;
}
.img2{
	height: 112px;
	width: 222px;
	border-radius: 6px;
}
.flex_b_c{
	height: 112px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.s_item{
	width: 232px !important;
	margin-left: 10px;
}
.item{
	width: 100%;
	height: 100%;
	position: relative;
}
.item1{
	width: 100%;
	height: 112px;
	position: relative;
}
.city_name{
	position: absolute;
	top:18px;
	left: 18px;
	font-size: 20px;
	font-weight: 700;
	color: #333333;
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.jl{
	position: absolute;
	top:48px;
	left: 18px;
	font-size: 12px;
	font-weight: 400;
	color: #333333;
}
.chain{
	position: absolute;
	max-width: 80%;
	bottom:30px;
	right: 10px;
	display: flex;
	flex-direction: column-reverse;
	.chain1{
		height: 27px;
		line-height: 27px;
		padding-left: 10px;
		background: rgba(0,0,0,0.4);
		border-radius: 14px 0 0 14px;
		/* opacity: 0.49; */
		color: #fff;
		font-size: 14px;
		margin-top: 6px;
	}
}
.see{
	display: flex;
	color: #fff;
	font-size: 12px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: calc(100% - 26px);
	padding: 2px 8px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 0 0 14rpx 14rpx;
	align-items: center;
}
.see_img{
	width: 14px;
	margin-right: 2px;
}
.m_left{
	margin-left: 10px;
}
</style>
